/**
 * Copyright (C) <2023> <Boundivore> <boundivore@foxmail.com>
 * <p>
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the Apache License, Version 2.0
 * as published by the Apache Software Foundation.
 * <p>
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * Apache License, Version 2.0 for more details.
 * <p>
 * You should have received a copy of the Apache License, Version 2.0
 * along with this program; if not, you can obtain a copy at
 * http://www.apache.org/licenses/LICENSE-2.0.
 */
import React, { useState, useRef } from 'react';
import { Row, Col, Flex } from 'antd';
import ReactDiffViewer from 'react-diff-viewer-continued';
import FullScreenButton from '@/components/fullScreenButton';
interface FullscreenDiffViewerProps {
	oldCode: string;
	newCode: string;
	newVersion: string;
	newTime: string;
	oldVersion: string;
	oldTime: string;
}
const FullscreenDiffViewer: React.FC<FullscreenDiffViewerProps> = ({ oldCode, newCode, ...props }) => {
	const [isFullScreen, setIsFullScreen] = useState(false);
	const containerRef = useRef(null);
	const { newVersion, newTime, oldVersion, oldTime } = props;

	return (
		<div
			ref={containerRef}
			className={`relative w-full bg-white ${isFullScreen ? 'fixed inset-0 z-50' : ''}
      `}
		>
			<Flex justify="flex-end">
				<FullScreenButton containerRef={containerRef} isFullScreen={isFullScreen} setIsFullScreen={setIsFullScreen} />
			</Flex>

			<div className={`w-full ${isFullScreen ? 'mt-8 h-[90%] ' : 'mt-0 h-[500px] '} overflow-auto`}>
				<Row className="diff-header">
					<Col span={12}>
						<div className="flex justify-between">
							<h4>版本：{newVersion}</h4>
							<h4>{newTime}</h4>
						</div>
					</Col>
					<Col span={12}>
						<div className="ml-4 flex justify-between">
							<h4>当前使用版本：{oldVersion}</h4>

							<h4>{oldTime}</h4>
						</div>
					</Col>
				</Row>
				<ReactDiffViewer oldValue={oldCode} newValue={newCode} {...props} splitView={true} />
			</div>
		</div>
	);
};

export default FullscreenDiffViewer;
